<template>
	<view class="content">
		<uni-nav-bar left-icon="back" statusBar border="false" @clickLeft="backLeft" title="项目管理" :border="false"></uni-nav-bar>
		<view class="father" v-for="(item,index) in projects" :key="item.id">
			<view class="one" :class="actives === index ? 'active': ''" @click="jumpProjectDetail(index)">
				<view class="son1">
					<image :src="item.image_url" mode="scaleToFill" style="width: 120rpx; height: 120rpx;"></image>
				</view>
				<view class="son2" @touchstart="starts(index,$event)" @touchend="ends(index,$event)">
					<text>{{item.items_title}}</text>
					<text>￥{{item.price}}</text>
					<text>{{item.content}}</text>
				</view>
			</view>
			<text :class="actives === index ? 'texTentersActive': ''" class="hover-stop-propagation" @click="delte(index)">删除</text>
		</view>

		<view class="addProject" @click="addProject">
			<text>添加项目</text>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	export default {
		components: {
			uniIcons
		},
		onShow() {
			this.getProject();
		},
		data() {
			return {
				projects: null,
				actives: null,
				startsX: null,
				movesX: null,
				endsX: null,
			}
		},
		methods: {
			backLeft() {
				uni.switchTab({
					url: "../../homePage3/homePage3"
				})
			},
			async getProject() {
				let openid = this.$store.state.userinfo.openid;
				let res = await this.$myrequest({
					url: `Mianpage/getProject?openid=${openid}`
				});
				this.projects = res.data.data;
			},
			jumpProjectDetail(index) {
				uni.redirectTo({
					url: `../projectDetails2/projectDetails2?pro=${encodeURIComponent(JSON.stringify(this.projects[index]))}`
				})
			},
			async delte(index) {
				this.actives = null;
				let res = await this.$myrequest({
					url: "Mianpage/getDelete",
					method: "POST",
					data: {
						id: this.projects[index].id
					},
				});
				if (res.data.code == 200) {
					this.getProject();
				};
			},

			starts(index, event) {
				this.startsX = event.changedTouches[0].pageX;
			},

			ends(index, event) {
				if (this.startsX - event.changedTouches[0].pageX > 0) {
					this.actives = index;
				} else {
					this.actives = null;
				};
			},
			addProject() {
				uni.navigateTo({
					url: "../addProject3/addProject3"
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background-color: #F5F8FA;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 20rpx;
		padding-bottom: 150rpx;
	}

	.father {
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
		height: 160rpx;
		background-color: #FFFFFF;
		border-radius: 15rpx;
	}

	.father:not(:first-of-type) {
		margin-top: 20rpx;
	}

	.one {
		width: 700rpx;
		height: 160rpx;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.son1,
	.son2 {
		height: 100%;
	}

	.son1 {
		padding: 20rpx;
		display: flex;
		align-items: center;
	}

	.son2 {
		display: flex;
		flex-wrap: wrap;
		width: 100%;

		text {
			display: inline-block;
			width: 100%;

			&:first-of-type {
				color: #373438;
				font-size: 32rpx;
			}

			&:nth-of-type(2) {
				color: #BD0000;
				font-size: 26rpx;
			}

			&:last-of-type {
				color: #A6A3A6;
				font-size: 26rpx;
			}
		}
	}

	.father {
		>text {
			width: 150rpx;
			height: 100%;
			background-color: red;
			color: #FFFFFF;
			position: absolute;
			right: -150rpx;
			top: 0;
			font-size: 40rpx;
			letter-spacing: 6rpx;
			@include shuipingchuijuzhong;
		}
	}

	@keyframes enters {
		to {
			transform: translateX(-15%);
		}
	}

	.active {
		animation: enters .1s ease;
		animation-fill-mode: forwards;
	}

	@keyframes texTenters {
		to {
			transform: translateX(-100%);
		}
	}

	.texTentersActive {
		animation: texTenters .1s ease;
		animation-fill-mode: forwards;
	}

	.addProject {
		@include dibuanniu;
		width: 689rpx;
		font-size: 36rpx;
	}
</style>
